<template>
<div id="main" :style="{ width: '990px', height: '290px' }" >
</div>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";

onMounted(()=>{
  const chartDom = document.getElementById('main');
  const myChart = echarts.init(chartDom);
  let option;
  option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['饲料数量', '药品数量'],
      top:'5%'
    },
    grid: {
      left:'10%',
      top:'20%'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2022/3/8', '2022/3/9', '2022/3/10', '2022/3/11', '2022/3/12', '2022/3/13','2022/3/14','2022/3/15','2022/3/16','2022/3/17','2022/3/18','2022/3/19','2022/3/20','2022/3/20']
    },
    yAxis: {
      type:'value'
    },
    series: [
      {
        name: '饲料数量',
        type: 'line',
        data: [320, 332, 301, 334, 390, 330, 320,360,340,380,386,390,314,350]
      },
      {
        name: '药品数量',
        type: 'line',
        data: [300, 395, 403, 374, 310, 290, 331,365,368,371,392,275,412,369]
      }
    ]
  };
  option && myChart.setOption(option);
    window.onresize = ()=>{
    myChart.resize()
  }
})

</script>

<style scoped>

</style>
